<template>
	<view class="invite">
		<headTop>
			<uv-navbar title="邀请列表" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>
		<view class="steps">
			<uv-cell-group>
				<uv-cell v-for="item in invitelist" :key="item.id" :title="item.username"
					:value="`消费: ${item.consumption}`" :label="item.createdAt" :center="true"></uv-cell>
			</uv-cell-group>
		</view>
		<view v-if="isBottom">
			<uv-divider text="已经到底了"></uv-divider>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
	import headTop from "@/components/headTop/index.vue";
	import { userApi } from "@/api/index";

	const params = ref({ page: 1, limit: 15 });
	const invitelist = ref<any>([]);
	const isBottom = ref(false);
	const getList = async () => {
		try {
			const res = await userApi.getinvitelist(params.value);
			if (params.value.limit > res.data.list.length) {
				isBottom.value = true;
			}
			invitelist.value = [...invitelist.value, ...res.data.list];
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};
	getList();

	/* -----------------------------------------------跳转上一步------------------------------- */
	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	/* -----------------------------------------------下拉刷新------------------------------- */
	import { onReachBottom } from "@dcloudio/uni-app";
	onReachBottom(() => {
		if (isBottom.value) return;
		params.value.page++;
		getList();
	});
</script>

<style lang="scss">
	.invite {
		.steps {
			margin-top: 2vw;

			.uv-cell-group {
				background-color: rgba(255, 255, 255, 0.6) !important;
				border-radius: 2vw !important;
			}
		}
	}
</style>